import { Card, Form, Input, Button, DatePicker, Table } from 'antd'
import { SearchOutlined } from '@ant-design/icons'
import { useEffect, useState } from 'react'
import { reqUserList } from '@api/user/userinfo'
import { IuserType } from '@api/user/model/userTypes'

const { RangePicker } = DatePicker
export default function UserList() {
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const [userList, setUserList] = useState<IuserType>()
  const [total, setTotal] = useState(10)
  const [loading, setLoading] = useState(false)
  const [searchOption, setSearchOption] = useState<object>()

  const [form] = Form.useForm()
  const columns = [
    {
      title: '序号',
      render: (text: any, record: any, index: number) => {
        return index + 1
      },
      align: 'center' as 'center',
      key: 'index',
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '昵称',
      dataIndex: 'nickName',
      key: 'nickName',
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (text: any) => {
        return text ? '正常' : '异常'
      },
    },
    {
      title: '认证状态',
      dataIndex: 'param',
      key: 'authStatusString',
      render: (text: any) => {
        return text.authStatusString
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
    },
    {
      title: '操作',
      key: 'operator',
      render: () => {
        return (
          <div>
            <Button type="primary" style={{ marginRight: 10 }}>
              查看
            </Button>
            <Button disabled>锁定</Button>
          </div>
        )
      },
    },
  ]

  async function getUserList(
    page: number,
    pageSize: number,
    searchOption: any
  ) {
    setLoading(true)
    const result = await reqUserList({ page, limit: pageSize, ...searchOption })
    setUserList(result.records)
    setTotal(result.total)
    setLoading(false)
    console.log(result)
  }

  const getPageChange = async (page: number, pageSize: number) => {
    getUserList(page, pageSize, searchOption)
    setPage(page)
    setPageSize(pageSize)
  }

  const onFinish = async (values: any) => {
    const { keyword, date } = values
    const createTimeBegin = date && date[0].format('YYYY-MM-DD')
    const createTimeEnd = date && date[1].add(1, 'days').format('YYYY-MM-DD')
    const searchOption = {
      keyword,
      createTimeBegin,
      createTimeEnd,
    }
    setSearchOption(searchOption)
    getUserList(page, pageSize, searchOption)
  }

  const clearForm = ()=>{
    form.resetFields()
    getUserList(page,pageSize,{})
  }

  useEffect(() => {
    getUserList(page, pageSize, searchOption)
  }, [])

  return (
    <Card>
      <Form
        layout="inline"
        onFinish={onFinish}
        style={{ marginBottom: 20 }}
        form={form}
      >
        <Form.Item name="keyword">
          <Input placeholder="姓名/手机" />
        </Form.Item>
        <Form.Item label="创建时间" name="date">
          <RangePicker />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
            查询
          </Button>
        </Form.Item>
        <Form.Item>
          <Button onClick={clearForm}>清空</Button>
        </Form.Item>
      </Form>
      <Table
        loading={loading}
        columns={columns}
        dataSource={userList}
        bordered
        pagination={{
          current: page,
          pageSize,
          total,
          showSizeChanger: true,
          onChange: getPageChange,
          showQuickJumper: true,
          showTotal: (total) => `总共${total}条`,
        }}
      />
    </Card>
  )
}
